<!-- Naglfar supports comments -->

<html>
  <link rel="stylesheet" type="text/css" href="test.css">
  <body>
    <div id="header">
      <div class="inner">
        <img width="60" src="logo.png" style="float:left">
        <div class="title">Naglfar</div>
        <div class="description">A toy web browser in Rust</div>
      </div>
    </div>
    <div style="width:95%;margin-left:auto;margin-right:auto">
      <div style="float:left;width:20%">
        <div class="sidebar">
          <div class="title">
            Table of contents
          </div>
          <div class="sidebar_content">
            <div class="sidebar_element">
              <a href="#card1" class="sidebar_element">Heading 1, 2, 3</a>
            </div>
            <div class="sidebar_element">
              <a href="#card2" class="sidebar_element">Some sentences</a>
            </div>
            <div class="sidebar_element">
              <a href="#card3" class="sidebar_element">Line Height</a>
            </div>
            <div class="sidebar_element">
              <a href="#card4" class="sidebar_element">Text Highlighten</a>
            </div>
            <div class="sidebar_element">
              <a href="#card5" class="sidebar_element">Text Align</a>
            </div>
            <div class="sidebar_element">
              <a href="#card6" class="sidebar_element">Floats</a>
            </div>
            <div class="sidebar_element">
              <a href="#card7" class="sidebar_element">Image</a>
            </div>
            <div class="sidebar_element">
              <a href="#card8" class="sidebar_element">Code</a>
            </div>
            <div class="sidebar_element">
              <a href="#card9" class="sidebar_element">Transparency</a>
            </div>
            <div class="sidebar_element">
              <a href="#card10" class="sidebar_element">Anker test</a>
            </div>
            <div class="sidebar_element">
              <a href="#card11" class="sidebar_element">Text Decoration</a>
            </div>
            <div class="sidebar_element">
              <a href="#card12" class="sidebar_element">Colors</a>
            </div>
            <div class="sidebar_element">
              <a href="#todo" class="sidebar_element">TODO</a>
            </div>
          </div>
        </div>
        <div class="sidebar"> 
          <div class="title">
            Links
          </div>
          <div class="sidebar_content">
            <div class="sidebar_element">
              <a href="test2.html" class="sidebar_element">Another Page</a>
            </div>
            <div class="sidebar_element">
              <a href="rainbow.html" class="sidebar_element">Rainbow</a>
            </div>
          </div>
        </div>
      </div>
      <div style="float:right;width:80%">
        <div class="card" id="card1">
          <div class="title">
            Heading 1, 2, 3
          </div>
          <div class="content">
            <h1>Welcome to Naglfar Example!</h1>
            <h2>Welcome to Naglfar Example!</h2>
            <h3>Welcome to Naglfar Example!</h3>
          </div>
        </div>
        <div class="card" id="card2">
          <div class="title">
            Some sentences
          </div>
          <div class="content special">
            日本語〜日本語文章サンプル。日本語〜日本語文章サンプル。日本語〜日本語文章サンプル。日本語〜日本語文章サンプル。日本語〜日本語文章サンプル。
            <span>the quick brown fox jumps over the lazy dog.</span>
            the quick brown fox jumps over the lazy dog.
            the quick brown fox jumps over the lazy dog.
            the quick brown fox jumps over the lazy dog.
          </div>
        </div>
        <div class="card" id="card3">
          <div class="title">
            Line Height
          </div>
          <div class="content">
            <div style='line-height: 2.0'>
              line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0;
              line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0;
              line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0; line-height: 2.0;
            </div>
            <div style='line-height: 100px'>
              line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px;
              line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px;
              line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px; line-height: 100px;
            </div>
          </div>
        </div>
        <div class="card" id="card4">
          <div class="title">
            Text Highlighten
          </div>
          <div class="content">
            the quick brown fox jumps over the lazy dog.
            the quick brown fox jumps over the lazy dog.
            <span class="highlight">
              the quick brown fox jumps over the lazy dog.
              the quick brown fox jumps over the lazy dog.
              the quick brown fox jumps over the lazy dog.
              the quick brown fox jumps over the lazy dog.
            </span>
            the quick brown fox jumps over the lazy dog.
            the quick brown fox jumps over the lazy dog.
          </div>
        </div>
        <div class="card" id="card5">
          <div class="title">
            Text Align
          </div>
          <div class="content">
            <div style="text-align: left; color: red;">
              text-align is left.
            </div>
            <div style="text-align: center; color: green;">
              text-align is center.
            </div>
            <div style="text-align: right; color: blue;">
              text-align is right.
            </div>
          </div>
        </div>
        <div class="card" id="card6">
          <div class="title">
            Floats
          </div>
          <div class="content">
            <div>This line is in a div.</div>
            <div style="float:left;width:20%;height:60px;background:red;color:white;font-size:20px;">I am a floating div</div>
            <div style="float:left;width:100px;height:80px;background:blue;color:white;font-size:20px;">I am a floating div</div>
            <div style="float:right;width:100px;height:100px;background:green;color:white;font-size:20px;">I am a floating div</div>
            <div style="background:#FF9966;padding:10px;">
              Normal div text-align: center. Normal div text-align: center. Normal div text-align: center.
              Normal div text-align: center. Normal div text-align: center. Normal div text-align: center.
              Normal div text-align: center. Normal div text-align: center. Normal div text-align: center.
              Normal div text-align: center. Normal div text-align: center. 
            </div>
            <div>
              <div style="float:left;width:200px;border:solid 1px black">
                <div>aaa</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
                <div style="float:left;width:70px;border:solid 1px red">hello hello hello</div>
              </div>
              <div style="clear:both"></div>
            </div>
          </div>
        </div>
        <div class="card" id="card7">
          <div class="title">
            Image
          </div>
          <div class="content">
            <div>This is a beautiful jpg image: <img src="image1.jpg" width='20%'>
              <img src="display_block.jpg" style="display:block;margin:30px">The above image is <b>display:block;</b></div>
            <img src="image2.png" height="100px" style="float:left;padding:20px">
            <img src="image2.png" width="25%" style="float:right">
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
            The images in both sides are png and floating.
          </div>
        </div>
        <div class="card" id="card8">
          <div class="title">
            Code
          </div>
          <div class="content">
            <div style="background:#282c34;padding:10px;font-size:18px;">
              <div style="color:white">
                <span style="color:#c678dd">int</span> <span style="color:#61afef">main</span>() {
              </div>
              <div style="color:white;padding-left:20px;">
                printf(<span style="color:#98c379">"Hello world!"</span>);
              </div>
              <div style="color:white;padding-left:20px;">
                <span style="color:#c678dd">return</span> <span style="color:#d19a66;">0</span>;
              </div>
              <div style="color:white">
                }
              </div>
            </div>
            <div style="height: 20px;margin-top:10px;">
              <div class="footer left"
              >4 Lines</div><div style="margin-left:10px" class="footer left"
              >C/C++</div><div class="footer right"
              >Submit</div>
            </div>
          </div>
        </div>
        <div class="card" id="card9">
          <div class="title">
            Transparency
          </div>
          <div class="content">
            <div style="width:300px;height:100px;background:rgba(250, 230, 100, 0.7);">
              <div style="width:280px;height:80px;background:rgba(250, 100, 230, 0.3);">
                <div style="width:260px;height:100px;background:rgba(100, 250, 230, 0.3);">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="card" id="card10">
          <div class="title">
            Anker test
          </div>
          <div class="content">
            <div style="text-align:center;padding:10px;">
              <a href="test2.html">Click me!</a>
            </div>
          </div>
        </div>
        <div class="card" id="card11">
          <div class="title">
            Text Decoration
          </div>
          <div class="content">
            <div>
              <span style="text-decoration: underline;">Underline Text! 下線が使える</span>
            </div>
            <div>
              <span style="text-decoration: line-through;">Line-through Text! 打ち消し線だよ</span>
            </div>
          </div>
        </div>
        <div class="card" id="card12">
          <div class="title">
            Colors
          </div>
          <div class="content">
            <div style="background: black  ;width:100px;height:100px;float:left;"><span style="color:white;">background: black  </span></div>
            <div style="background: silver ;width:100px;height:100px;float:left;">                     <span>background: silver </span></div>
            <div style="background: gray   ;width:100px;height:100px;float:left;">                     <span>background: gray   </span></div>
            <div style="background: white  ;width:100px;height:100px;float:left;">                     <span>background: white  </span></div>
            <div style="background: maroon ;width:100px;height:100px;float:left;"><span style="color:white;">background: maroon </span></div>
            <div style="background: red    ;width:100px;height:100px;float:left;">                     <span>background: red    </span></div>
            <div style="background: purple ;width:100px;height:100px;float:left;"><span style="color:white;">background: purple </span></div>
            <div style="background: fuchsia;width:100px;height:100px;float:left;">                     <span>background: fuchsia</span></div>
            <div style="background: green  ;width:100px;height:100px;float:left;">                     <span>background: green  </span></div>
            <div style="background: lime   ;width:100px;height:100px;float:left;">                     <span>background: lime   </span></div>
            <div style="background: olive  ;width:100px;height:100px;float:left;">                     <span>background: olive  </span></div>
            <div style="background: yellow ;width:100px;height:100px;float:left;">                     <span>background: yellow </span></div>
            <div style="background: navy   ;width:100px;height:100px;float:left;"><span style="color:white;">background: navy   </span></div>
            <div style="background: blue   ;width:100px;height:100px;float:left;"><span style="color:white;">background: blue   </span></div>
            <div style="background: teal   ;width:100px;height:100px;float:left;">                     <span>background: teal   </span></div>
            <div style="background: aqua   ;width:100px;height:100px;float:left;">                     <span>background: aqua   </span></div>
            <div style="clear:both"></div>
          </div>                       
        </div>                         
        <div class="card" id="todo">
          <div class="title">     
            TODO
          </div>
          <div class="content">
            <div>- Refine code</div>
            <div>- More efficient implementation</div>
            <div>- Write documents/comments</div>
          </div>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
    <footer>
      <div style="float:left; font-size: 13px; color:#555">© 2018 @uint256_t. All Rights Reserved.</div>
      <div style="float:right; font-size: 13px"><a href="#header" style="color:#555">TOP</a></div>
      <div style="clear:both"></div>
    </footer>
  </body>
</html>
